<template>
  <!-- 弹窗公告 -->
  <div class="asheng-gg-detail">
    <div id="asheng-gg-detail-dlalog">
      <img src="/image/ggTitle.png" style="width: 100%;" />
      <div style="background:#fff;margin-top:-50px;">
        <div id="asheng-gg-detail-title">
          {{ msg.title ? msg.title : '公告提示' }}
        </div>
        <div id="asheng-gg-detail-text">
          <div style="width:100%;overflow:auto">
            <div :style="{'width': (fileList.length * 88) + 'px'}">
              <van-uploader v-model="fileList" :deletable="false" :show-upload="false" />
            </div>
          </div>
          <div v-if="msg.content">
            <div v-for="(str,index) in msg.content.split('\n')" :key="'gg'+ index">{{str}}</div>
          </div>
          <!-- {{ msg.content ? msg.content : '无' }} -->
        </div>
        <div style="text-align: center;height: 50px;border-top: 1px solid #eee;">
          <div style="height: 10px;width: 100%;"></div>
          <div>
            <van-button type="primary" style="width:50%" size="small" @click="$emit('ok')">我知道了</van-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    msg: Object,
  },
  data() {
    return {
      fileList: [],
    }
  },
  created() {
    if (this.msg.imgUrlList && this.msg.imgUrlList.length > 0) {
      this.msg.imgUrlList.forEach((img) => {
        this.fileList.push({
          url: img.url,
          imageFit: 'contain',
        })
      })
    }
  },
}
</script>
<style scoped>
.asheng-gg-detail {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 22;
  background: rgba(0, 0, 0, 0.4);
  max-width: 500px;
  transform: translate(-50%, -50%);
}

#asheng-gg-detail-dlalog {
  position: absolute;
  width: 70%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 16px 16px 16px 16px;
  font-size: 14px;
  font-weight: 400;
  color: #000000;
  line-height: 20px;
  overflow: hidden;
}

#asheng-gg-detail-title {
  line-height: 25px;
  text-align: center;
  color: #333;
  font-size: 24px;
  padding: 10px 40px;
  font-weight: bold;
}

#asheng-gg-detail-text {
  max-height: 400px;
  min-height: 200px;
  width: 94%;
  margin-left: 3%;
  margin-top: 10px;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
